import React, { useEffect, useState } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { Button, Table } from 'antd';
import axios from 'axios';
import './Coursejs.scss'

const Coursejs = () => {
    const location = useLocation();
    const { record } = location.state || {};
    // console.log(record.img); // 输出状态对象的值
    //动态切换右边组件显示隐藏
    const [activeTab, setActiveTab] = useState('introduction')
    var navigate = useNavigate()

    //返回
    var handleClick = () => {
        navigate('/index/course')
    }
    //设置表格列表配置
    const columns: any = [
        {
            title: '名字',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '班级',
            dataIndex: 'class',
            key: 'class',
        },
        {
            title: '性别',
            dataIndex: 'gander',
            key: 'gander',
        },
        {
            title: '学号',
            dataIndex: 'sno',
            key: 'sno',
        },
        {
            title: '签到状态',
            dataIndex: 'sign',
            key: 'sign',
        },
    ]
    //数据源
    var [data, setData] = useState([])
    useEffect(() => {
        datalist()
    }, [])
    var datalist = async () => {
        var res = await axios({
            url: "http://localhost:3000/sign"
        })
        //给数据的每一项添加一个key,方便对每一项数据进行操作
        var numlist = res.data.map((item: any) => ({
            ...item,
            key: item.id
        }))
        setData(numlist)
    }

    return (
        <>
            {record ? (
                <div className='coursejs'>
                    <div className='header'>
                        <div>课程介绍</div>
                        <Button type="primary" onClick={handleClick}>{'<'}返回</Button>
                    </div>
                    <div className='box'>
                        <div className='left'>
                            <div className='img'>
                                <img src={record && record.img} alt="" />
                            </div>
                            <div className='title'>
                                <div>{record && record.name}</div>
                                <div>{record && record.time}</div>
                            </div>

                            <div className='count'>
                                <div className='one'>
                                    <div>关于课程</div>
                                    <div className='jieshao'>
                                        &nbsp;&nbsp; {record && record.jieshao}
                                    </div>
                                </div>

                                <div className='two'>
                                    <div>开课课程</div>
                                    <div>
                                        {record && record.time}
                                    </div>
                                </div>

                                <div className='three'>
                                    <div>课程老师</div>
                                    <div>
                                        {record && record.teacher}
                                    </div>
                                </div>

                                <div className='four'>
                                    <div>已读数量</div>
                                    <div>
                                        {record && record.read}
                                    </div>
                                </div>

                                <div className='four'>
                                    <div>上课地址</div>
                                    <div>
                                        {record && record.dizhi}
                                    </div>
                                </div>

                                <div className='six'>
                                    <div className='hour'>
                                        <div className='hours'> 7000小时 </div>
                                        <div> 累计上课时长 </div>
                                    </div>
                                    <div className='peop'>
                                        <div className='hours'> 120人 </div>
                                        <div> 累计上课时长 </div>
                                    </div>
                                    <div className='menu'>
                                        <div className='hours'> 85分 </div>
                                        <div> 累计上课时长 </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className='right'>
                            <div className='title'>
                                <button className={activeTab === 'introduction' ? 'tab active' : 'tab'} onClick={() => setActiveTab('introduction')}>
                                    课程介绍
                                </button>
                                <button className={activeTab === 'checkin' ? 'tab active' : 'tab'} onClick={() => setActiveTab('checkin')}>
                                    签到记录
                                </button>
                            </div>
                            <div className="content">
                                {activeTab === 'introduction' ?
                                    <div className='contentleft'>
                                        &nbsp;&nbsp; {record && record.jieshao}
                                        <img src={record && record.img} alt="" />
                                    </div> :
                                    <div className='contentright'>
                                        <Table columns={columns} dataSource={data}/>
                                    </div>
                                }
                            </div>
                        </div>
                    </div>
                </div>
            ) : <h1>请从课程列表选择一项课程查看!!!</h1>}
        </>
    );
};

export default Coursejs;